<template>
  <div class="setPara">
    <div class="mask"></div>
    <div class="parameter">
      <div class="pa-top">
        <p>条码机参数设置</p>
        <i class="el-icon-close" @click="closeParameter"></i>
      </div>

      <div class="pa-center">
        <div>
          <p>吊牌参数设置</p>
          <br>
          <p>端口</p>
          <el-input v-model="port" key="para1"></el-input>
          <p>温度</p>
          <el-input v-model="temperature" key="para2"></el-input>
          <p>速度</p>
          <el-input v-model="speed" key="para3"></el-input>
          <p>左边界</p>
          <el-input v-model="lefts" key="para4"></el-input>
          <p>上边界</p>
          <el-input v-model="top" key="para5"></el-input>
          <p>条码机名称</p>
          <!-- <el-input v-model="printAddress"></el-input> -->
          <el-autocomplete
            class="e-inp"
            clearable
            v-model="printAddress"
            @select="changeName"
            @change="leaveName"
            :fetch-suggestions="querySearch">
          </el-autocomplete>
          <p>域名</p>
          <el-input v-model="printIp"></el-input>
          <p>端口号</p>
          <el-input v-model="printPort"></el-input>
          <div style="display:none;">
          <p>id</p>
          <el-input v-model="id"></el-input>
          </div>
          <div style="display:flex;justify-content:space-between;">
            <el-checkbox class="sle2" v-model="rotate">旋转180°</el-checkbox>
            <el-button type="primary" @click="change">保存</el-button>
          </div>
          
        </div>
        <div style="position:relative;">
          <p>洗标参数设置</p>
          <br>
          <el-input v-model="xbPort" key="para6"></el-input>
          <el-input v-model="xbTemperature" key="para7"></el-input>
          <el-input v-model="xbSpeed" key="para8"></el-input>
          <el-input v-model="xbLeft" key="para9"></el-input>
          <el-input v-model="xbTop" key="para10"></el-input>
          <div style="position:absolute;bottom:0;right:0;">
            <el-button type="primary" @click="change1">保存</el-button>
          </div>
          
        </div>
      </div>
      <div style="text-align:end;padding-right:15px;">
        <el-button type="primary" @click="closeParameter">关闭</el-button>
      </div>
      
    </div>
  </div>
</template>

<script>
import { getPrinterParameter, postPrinterParameter } from '../../../../network/tags'
export default {
  created(){
    getPrinterParameter().then(res => {
      console.log(res.data.data)
      this.dataList = res.data.data
      this.dataList.forEach(e => {
        this.dataList1.push({lable:e.printAddress,value:e.printAddress,id:e.id})
      });
      for(let i of this.dataList){
        // this.id = i.id
        this.port = i.port
        this.temperature = i.temperature
        this.speed = i.speed
        this.lefts = i.lefts
        this.top = i.top
        this.xbPort = i.xbPort
        this.xbTemperature = i.xbTemperature
        this.xbSpeed = i.xbSpeed
        this.xbLeft = i.xbLeft
        this.xbTop = i.xbTop
        this.rotate = i.rotate
      }
    })
  },
  data(){
    return {
      id: '',
      port: 255,
      temperature: '',
      speed: '',
      lefts: '',
      top: '',
      xbPort: '',
      xbTemperature: '',
      xbSpeed: '',
      xbLeft: '',
      xbTop: '',
      rotate: false,
      printPort:'',
      printIp:'',
      printAddress:'',
      dataList:[],
      dataList1:[],
    }
  },
  methods: {
    leaveName(){
      for(let u of this.dataList){
        if(this.printAddress != u.printAddress){
          this.id = ''
          this.printIp = ''
          this.printPort = ''
        }
      }
    },
    changeName(){
      console.log(this.dataList)
      for(let u of this.dataList){
        console.log(u.printAddress)
        if(this.printAddress == u.printAddress){
          this.id = u.id
          this.printIp = u.printIp
          this.printPort = u.printPort
        }
      }
    },
    querySearch(queryString,cb){
      let dataList1 = this.dataList1
      let results = queryString ? dataList1.filter(this.createFilter(queryString)) : dataList1
      cb(results)
    },
    createFilter(queryString) {
      return (composition) => {
        return (composition.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
      }
    },

    closeParameter(){
      this.$emit("closeParameter")
    },
    change(){
      console.log(this.dataList1)
      for(let a of this.dataList1){
        if(this.id == a.id){
          this.$confirm('是否修改此id条码机的参数 是否确认？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
            let params = {
            id: this.id,
            port: this.port,
            temperature: this.temperature,
            speed: this.speed,
            lefts: this.lefts,
            top: this.top,
            rotate: this.rotate == false ? 0 : 1,
            printAddress:this.printAddress,
            printIp:this.printIp,
            printPort:this.printPort
          }
          this.$emit("change",params)
          });
          return
        }
      }
      if(this.id == ''){
          let params1 = {
            port: this.port,
            temperature: this.temperature,
            speed: this.speed,
            lefts: this.lefts,
            top: this.top,
            rotate: this.rotate == false ? 0 : 1,
            printAddress:this.printAddress,
            printIp:this.printIp,
            printPort:this.printPort
          }
          this.$emit("change",params1)
        }
      
    },
    change1(){
      let obj = {
        id:this.id,
        xbPort: this.xbPort,
        xbTemperature: this.xbTemperature,
        xbSpeed: this.xbSpeed,
        xbLeft: this.xbLeft,
        xbTop: this.xbTop,
      }
      postPrinterParameter(obj).then(res=>{
        console.log(res.data)
        if(res.data.code == 200){
          this.$message({
            type:'success',
            message:'保存成功'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
  }
  .parameter{
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 560px;
    height: 580px;
    box-sizing: border-box;
    z-index: 99;
  }
  .pa-top{
    background-color: #f2f2f2;
    height: 50px;
  }
  .pa-top p{
    float: left;
    margin: 15px 0 0 20px;
    font-weight: bolder;
  }
  .pa-top i{
    width: 50px;
    float: right;
    text-align: center;
    line-height: 50px;
  }
  .parameter input{
    border: #ccc solid 1px;
    border-radius: 5px;
    width: 150px;
    height: 30px;
    margin-bottom: 20px;
  }

  .pa-center{
    display: flex;
    padding: 15px 15px 15px 15px;
    border-bottom: solid #ccc 1px;
    margin-bottom: 20px;
  }
  
  .pa-center p{
    display: inline-block;
    width: 82px;
  }
  .pa-center div p:first-child{
    width: auto;
    font-weight: bolder;
    margin-bottom: 15px;
  }
  .pa-center>div{
    width: 280px;
  }
  .pa-center>div:last-child{
    padding-left: 20px;
    border-left: 1px solid #f4f4f4;
  }
  
</style>

<style>
  .setPara .el-input{
    width: 160px;
    margin-bottom: 10px;
  }
  .setPara .el-input__inner{
    height: 30px;
  }
.setPara .el-checkbox:last-of-type{
  margin-top: 5px;
}
</style>